<!-- 模块说明 -->
<template>
    <div id="box">
        <!-- 需要使用全局组件 -->
        <div @click="router.push('/goods/' + item.proid)" v-for="(item, i) in data" :key="i">
            <img :src="item.img1" alt="">
            <p class="p1">{{ item.proname }}</p>
            <p style="color:red;font-size: 18px;font-weight: bold;">￥{{ item.originprice }}</p>
            <span>{{ item.stock }}/{{ item.sales }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue'
import { useRouter } from "vue-router"
const router = useRouter()
// const props = defineProps 解构赋值
const { data } = defineProps<{ data: any }>();
</script>
<style lang="scss" scoped>
#box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .p1 {
        padding-top: 15px;
    }

    >div {
        width: 40%;
        background: #fff;
        text-align: center;
        padding: 15px 0 15px 0;
        border-radius: 10px;
        margin-top: 20px;

        >img {
            max-width: 117px;

        }

        p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
}
</style>
